<template>
  <view :class="`_wrapper ` + classname">
    <view class="_wrapper-top">
      <view class="_txt">{{title}}</view>
      <view class="_txt" @click="onClear">{{ clearText }}</view>
    </view>
    <view class="_wrapper-bottom">
      <view
        v-for="item in list"
        :key="item.value"
        @tap="onSelect(item)"
        class="_item">{{item.label}}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "uni-search-history",
  props: {
    title: {
      type: String,
      default: '历史记录'
    },
    clearText: {
      type: String,
      default: '清除记录'
    },
    list: {
      type: Array,
      default: () => []
    },
    classname: {
      type: String,
      default: ''
    },
  },
  methods: {
    onSelect(item, index) {
      this.$emit('change', item, index);
    },
    onClear() {
      this.$emit('clear');
    }
  }
}
</script>

<style lang="scss" scoped>
  ._wrapper {
    &.mt-50 {
      margin-top: 50upx;
    }
    ._wrapper-top {
      display: flex;
      justify-content: space-between;
      ._txt {
        font-weight: 400;
        font-size: 28upx;
        line-height: 39upx;
        color: #A9A9A9;
      }
    }
    ._wrapper-bottom {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-left: -16upx;
      ._item {
        padding: 16upx;
        box-sizing: border-box;
        font-weight: 400;
        font-size: 28upx;
        color: #A9A9A9;
        margin-left: 16upx;
        background: #F5F5F5;
        margin-top: 20upx;
        border-radius: 23upx;
        min-width: 115upx;
        text-align: center;
       line-height: 39upx;
      }
    }
  }
</style>